<template>
    <div class="cc-login">
        <h2 class="cc-title">COMAC飞机制造管理系统</h2>
        <div class="cc-container">
            <div class="input-group">
                <label for="adminName">管理员名：</label>
                <input id="adminName" placeholder="请输入管理员名" v-model="adminName">
            </div>
            <div class="input-group">
                <label for="adminPwd">登录密码：</label>
                <input id="adminPwd" type="password" placeholder="请输入登录密码" v-model="adminPwd">
            </div>
            <div class="input-group">
                <!-- <span class="button" @click="handleLogin">登 录</span> -->
                <el-button type="primary" @click="handleLogin">登 录</el-button>
                <!-- <el-button type="success">Success</el-button> -->
                <!-- <el-button type="info">Info</el-button> -->
                <!-- <el-button type="warning">Warning</el-button> -->
                <!-- <el-button type="danger">Danger</el-button> -->
            </div>
        </div>
    </div>

    <cc-dialog title="错误" :content="dialogContent" :width="400" :is-shown="showDialog" @close="handleDialogClose"></cc-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CcDialog from '../components/CcDialog.vue'
import { adminModels } from '../models/AdminModels'
import { useRouter } from 'vue-router'
import { useAdminStore } from '../store/admin'
import { ElMessage } from 'element-plus'

//执行一些钩子函数，获得扩展对象
const router = useRouter()
const adminStore = useAdminStore()

//状态变量
const adminName = ref('jianguo')
const adminPwd = ref('123456')
const dialogContent = ref('')
const showDialog = ref(false)
// adminName.value = 'root'
// console.log(adminName.value)

//事件处理函数
const handleLogin = async ()=>{
    //console.log('用户当前输入的内容：', adminName.value, adminPwd.value)
    //验证输入内容
    if(adminName.value.trim() == ''){
        dialogContent.value = '用户名不能为空！<br>请重新输入！'
        showDialog.value = true
        return
    }
    if(adminPwd.value.length<6){
        dialogContent.value = '密码太短了！<br>请重新输入！'
        showDialog.value = true
        return
    }
    let code = await adminModels.adminLogin(adminName.value, adminPwd.value)
    if(code===2000){
        // alert('登录成功')
        ElMessage({
            message: '欢迎回来：'+adminName.value,
            type: 'success'
        })
        router.replace('/main')
    }else {
        dialogContent.value = '登录失败！<br>错误码为：'+code
        showDialog.value = true
    }
}
const jumpToMain = ()=>{
    //即将跳转到/main页面，此处可以执行前置处理
    // console.log($router)        //undefined
    // router.push('/main')
    // router.replace('/main')
}

interface DialogEvent {
    timestamp: number
    reason: string
}
const handleDialogClose = (e:DialogEvent)=>{
    // console.log('父组件正在处理子组件的“关闭”事件', e)
    showDialog.value = false
}

</script>

<style scoped>
.cc-login {
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(180deg, var(--cc-theme-color-blue), var(--cc-theme-color-green));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.cc-title {
    color: #fff;
    font-size: 26px;
    margin-bottom: 20px;
}
.cc-container {
    width: 480px;
    height: 280px;
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 10px #999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.input-group {
    width: 380px;
    display: flex;
    flex-direction: row;
}
.input-group:not(:first-child) {
    margin-top: 25px;
}
.input-group label {
    width: 90px;
}
.input-group input {
    flex: 1;
    padding: 4px 10px;
}
.input-group .button {
    margin-left: 90px;
    width: 100px;
}
.el-button {
    /* --el-color-primary: #00f;   在当前组件中定制ElementPlus组件的样式 */
}
</style>